<template>
    <div>
      <el-card>
        <el-descriptions class="margin-top" title="状态监控" :column="2" border>
          <template slot="extra">
            <el-button type="primary" v-if="this.code==0" @click="handleEdit" size="small">修改</el-button>
            <el-button type="primary" @click="login" v-if="this.code!=0" size="small">去登陆</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-s-custom"></i> -->
              JDK版本
            </template>
            1.7.0_72
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-date"></i> -->
              运行时间
            </template>
            526:19:49
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-male"></i> -->
              线程数量峰值
            </template>
            <el-tag size="small">193</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-male"></i> -->
              当前线程数量
            </template>
            <el-tag size="small">193</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-male"></i> -->
              用户线程数量
            </template>
            <el-tag size="small">104</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-male"></i> -->
              死锁线程数量
            </template>
            <el-tag size="small">0</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-male"></i> -->
              当前加载类数量
            </template>
            <el-tag size="small">37145</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-male"></i> -->
              已卸载类数量
            </template>
            <el-tag size="small">110169</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-message"></i> -->
              新生区GC名称
            </template>
            PS Scavenge
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-message"></i> -->
              老区GC名称
            </template>
            PS Mark Sweep
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-location-outline"></i> -->
              新生区GC时间(ms)
            </template>
            3616380
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-mobile-phone"></i> -->
              老区GC累计次数
            </template>
            541
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-mobile-phone"></i> -->
              新生区GC累计次数
            </template>
            324095
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- <i class="el-icon-location-outline"></i> -->
              老区GC时间(ms)
            </template>
            554988
          </el-descriptions-item>
          
        </el-descriptions>
      </el-card>
      <el-card style="margin-top:2%">
        <h4 style="margin-bottom:2%">内存占用情况</h4>
        <div>
          <p>堆内存</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="76.37" :format = "format" status="warning"></el-progress>
        </div>
        <div>
          <p>堆外内存</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="29.78" :format = "format" status="success"></el-progress>
        </div>
        <div>
          <p>Eden区</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="54.3" :format = "format" status="warning"></el-progress>
        </div>
        <div>
          <p>Survivor区</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="92.74" :format = "format" status="exception"></el-progress>
        </div>
        <div>
          <p>老区</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="74.77" :format = "format" status="warning"></el-progress>
        </div>
        <div>
          <p>永久区</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="29.51" :format = "format" status="success"></el-progress>
        </div>
        <div>
          <p>CodeCache区</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="31.49" :format = "format" status="success"></el-progress>
        </div>
      </el-card>
      
      <el-card style="margin-top:2%">
        <h4 style="margin-bottom:2%">JVM状态图</h4>
        <div id="CPU" style="height:400px; width:90%;">
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
import { getLoginUser,updateUser,getUserById } from '../../../api';
  export default {
    name: "Info",
    data() {
      return {
        college:'',
        createTime:'',
        updateTime:'',
        email: '',
        gender: '',
        major:'',
        avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.q1_lxgBodQG9LKZuE1pAfwHaHa?pid=ImgDet&rs=1',
        studentID: '未登录',
        
        nickname: '',
        
        role: '',
        code:'',
        editVisible:false,
        form: {},
        option:{},
      };
    },
    mounted() {
      this.load();
      
    },
    created(){
      
    },
    methods: {
      format(percentage){
        return percentage + "%  （1.12GB/1.47GB）"
      },
      handleEdit(){
        this.drawStatus();
      },
      getCategories(){
        let now = new Date();
        let res = [];
        let len = 10;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
          now = new Date(+now - 2000);
        }
        return res;
      },
      getCategories2(){
        let res = [];
        let len = 10;
        while (len--) {
          res.push(10 - len - 1);
        }
        return res;
      },
      getData(){
        let res = [];
        let len = 10;
        while (len--) {
          res.push(Math.round(Math.random() * 1000));
        }
        return res;
      },
      getData2(){
        let res = [];
          let len = 0;
          while (len < 10) {
            res.push(+(Math.random() * 10 + 5).toFixed(1));
            len++;
          }
          return res;
      },
      // getInterval(){
      //   let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
      //   data.shift();
      //   data.push(Math.round(Math.random() * 1000));
      //   data2.shift();
      //   data2.push(+(Math.random() * 10 + 5).toFixed(1));
      //   categories.shift();
      //   categories.push(axisData);
      //   categories2.shift();
      //   categories2.push(app.count++);
      //   myChart.setOption({
      //     xAxis: [
      //       {
      //         data: categories
      //       },
      //       {
      //         data: categories2
      //       }
      //     ],
      //     series: [
      //       {
      //         data: data
      //       },
      //       {
      //         data: data2
      //       }
      //     ]
      //   });
      // },
      drawStatus(){
        // 基于准备好的dom，初始化echarts实例
        let echarts = require('echarts');
        let myChart = echarts.init(document.getElementById('CPU'))
        // 绘制图表
        // var option;
        var categories = this.getCategories()
        var categories2 = this.getCategories2()
        var data = this.getData()
        var data2 = this.getData2()
        this.option = {
          dataset: [
            {
              dimensions: ['name', 'age', 'profession', 'score', 'date'],
              source: [
                ['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
                ['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
                ['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
                ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
                ['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
                ['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
                ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
                ['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
                ['Han Meimei', 67, 'Engineer', 366, '2011-03-12']
              ]
            },
            {
              transform: {
                type: 'sort',
                config: { dimension: 'score', order: 'desc' }
              }
            }
          ],
          xAxis: {
            type: 'category',
            axisLabel: { interval: 0, rotate: 30 }
          },
          yAxis: {},
          series: {
            type: 'bar',
            encode: { x: 'name', y: 'score' },
            datasetIndex: 1
          }
        };
        this.option = {
          title: {
            text: 'Dynamic Data'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#283b56'
              }
            }
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: {
            show: false,
            start: 0,
            end: 100
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: categories
            },
            {
              type: 'category',
              boundaryGap: true,
              data: categories2
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              name: 'Price',
              max: 30,
              min: 0,
              boundaryGap: [0.2, 0.2]
            },
            {
              type: 'value',
              scale: true,
              name: 'Order',
              max: 1200,
              min: 0,
              boundaryGap: [0.2, 0.2]
            }
          ],
          series: [
            {
              name: 'Dynamic Bar',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: data
            },
            {
              name: 'Dynamic Line',
              type: 'line',
              data: data2
            }
          ]
        };
        app.count = 11;
        setInterval(function () {
          let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
          data.shift();
          data.push(Math.round(Math.random() * 1000));
          data2.shift();
          data2.push(+(Math.random() * 10 + 5).toFixed(1));
          categories.shift();
          categories.push(axisData);
          categories2.shift();
          categories2.push(app.count++);
          myChart.setOption({
            xAxis: [
              {
                data: categories
              },
              {
                data: categories2
              }
            ],
            series: [
              {
                data: data
              },
              {
                data: data2
              }
            ]
          });
        }, 2100);
        myChart.setOption(this.option);
      },
      load() {
        getLoginUser().then(res => {
          this.code = res.code
            if(res.code != 0){
              this.$message.error('未登录，请先登录！')
            }else {
              let param={
                id:Number
              }
              param.id=res.data.id
              getUserById(param).then(response=>{
                this.userInfo=response.data
                this.form=response.data
                
                this.college= this.userInfo.college
                this.createTime= this.userInfo.createTime
                this.updateTime= this.userInfo.updateTime
                this.email= this.userInfo.email
                this.gender= this.userInfo.gender==1 ? '男' : '女'
                this.major= this.userInfo.major
                if(this.userInfo.userAvatar != '' && this.userInfo.userAvatar != null){
                  this.avatar = this.userInfo.userAvatar
                }
                this.studentID= this.userInfo.studentID
                this.nickname= this.userInfo.userName
                this.role= this.userInfo.userRole
              })
              
            }
            
        })
        
      },
      login(){
        this.$router.push('/login')
      },
    },
  };
  </script>
  
  <style scoped>
  .img {
    width: 80px;
    height: 80px;
  }
  </style>
  